<template>
  <div style="margin-left: 5px;">
    <el-tree
      class="filter-tree"
      style="overflow:auto;"
      :data="ztreeDataSource"
      :filter-node-method="filterNode"
      @node-click="handleNodeClick"
      ref="tree"
      node-key="value"
      :expand-on-click-node="false"
      :render-content="renderContent"
      :default-expand-all="true">
    </el-tree>
    <!--<Button  style="margin-top: 10px" type="info" @click="addNode" long>添加根目录</Button>-->
    <tree-item style="visibility: hidden"></tree-item>
  </div>
</template>

<script>
  import treeItem from './treeItem.vue'
  import axios from 'axios'
  import treeReload from './bus.js'

  export default {
    data() {
      return {
        /**
         *  左侧树 start
         * */
        ztreeDataSource: [],
        defaultProps: {
          children: 'children',
          name: 'name',
          isLeaf: 'leaf'
        },
        reactive: '1',
        // 以下为接口
        submitdata: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'projects_type_getall',
          id: '1'
        },
        dataList: [],
        treeDeepCopy: [],
        parentNodeModel: [], // 当前点击节点父亲对象
        nodeModel: null, // 当前点击节点对象
        ztreeDataSourceList: [],
        ztreeDataSourceSync: [],
        /**
         *  左侧树 end
         * */
        filterText: '',
        treeData: this.value,
        runParam: {},
        projectPid: this.$route.query.pid
      }
    },
    mounted() {
      this.queryData()
      // 父组件接受并刷新
      treeReload.$on('diaStatus', (dialogStatus) => {
        var vm = this
        console.log('父组件接受')
        vm.reactive = dialogStatus
        console.log(this.reactive)
        vm.ztreeDataSource = []
        vm.queryData()
      })
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val)
      }
    },
    methods: {
      // 资源树总览
      queryData() {
        axios.post('/protocol', this.submitdata, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          console.log(res)
          this.ztreeDataSource.push(res.data.data[0])
          console.log('0000', this.ztreeDataSource)
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      filterNode(value, data) {
        if (!value) return true
        return data.name.indexOf(value) !== -1
      },
      addNode() {
        this.treeData.splice(0, 0, {
          value: this.$utilHelper.generateUUID(),
          name: '输入节点名称1',
          children: [],
          dep: '4',
          isAdd: true
        })
      },
      handleNodeClick(nodeData) {
        this.$emit('NodeClick', nodeData)
        //        console.log(nodeData)
        //        setTimeout(() => {
        //          this.ztreeDataSource = []
        //          this.queryData()
        //          console.log(this.ztreeDataSource)
        //        }, 2000)
      },
      renderContent(h, { node, data, store }) {
        return h(treeItem, {
          props: {
            value: data,
            treeNode: node
          },
          on: {
            input: (node) => {
              data = node
            },
            Append: () => {
              console.log(111111)
              node.expanded = true
              data.children.push({
                //  value: this.$utilHelper.generateUUID(),
                name: '0001',
                children: [],
                dep: '4',
                cid: '',
                pid: '',
                isAdd: true
              })
            },
            // 删除节点
            Delete: (nodeData) => {
              console.log(1111)
              // 递归查找父节点
              var parentNode = this.$utilHelper.getNode(this.treeData, data.value).parentNode
              this.runParam.parentNode = parentNode
              this.runParam.data = data
              this.runParam.nodeData = nodeData
              this.$emit('DelNode', parentNode, data, this.CanDelNext)
            },
            // 保存节点
            SaveEdit: (nodeData) => {
              // 递归查找父节点
              var parentNode = this.$utilHelper.getNode(this.treeData, data.value).parentNode
              this.runParam.parentNode = parentNode
              this.runParam.data = data
              this.runParam.nodeData = nodeData
              this.$emit('SaveEdit', parentNode, data, this.CanSaveNext)
            },
            // 撤销修改
            CancelEdit: (nodeData) => {
              // 递归查找父节点
              console.log(33333333333)
              console.log(data)
              var parentNode = this.$utilHelper.getNode(this.treeData, data.value).parentNode
              if (data.isAdd) {
                parentNode.children.forEach((v, i) => {
                  if (v.value === data.value) {
                    parentNode.children.splice(i, 1)
                  }
                })
              } else {
                parentNode.children.forEach((v, i) => {
                  if (v.value === data.value) {
                    parentNode.children.splice(i, 1, JSON.parse(JSON.stringify(nodeData)))
                  }
                })
              }
            }
          }
        })
      },
      CanSaveNext(isNext, nodeId) {
        var parentNode = this.runParam.parentNode
        var nodeData = this.runParam.nodeData
        var data = this.runParam.data
        if (isNext) {
          parentNode.children.forEach((v, i) => {
            if (v.value === data.value) {
              if (this.HOST !== 'static' && data.isAdd) {
                data.value = nodeId
              }
              data.status = 0
              parentNode.children.splice(i, 1, data)
            }
          })
        } else {
          if (!data.isAdd) {
            parentNode.children.forEach((v, i) => {
              if (v.value === nodeData.value) {
                data.name = nodeData.name
                parentNode.children.splice(i, 1, data)
              }
            })
          }
        }
        this.runParam = {}
      },
      CanDelNext(isNext) {
        var parentNode = this.runParam.parentNode
        // var nodeData = this.runParam.nodeData
        var data = this.runParam.data
        if (isNext) {
          parentNode.children.forEach((v, i) => {
            if (v.value === data.value) {
              parentNode.children.splice(i, 1)
            }
          })
        }
        this.runParam = {}
      }
    },
    props: {
      value: Array
    },
    watch: {
      value: {
        handler: function(val, oldVal) {
          this.treeData = val
        },
        deep: true
      },
      treeData: {
        handler: function(val) {
          this.$emit('input', val)
        },
        deep: true
      }
    },
    components: {
      treeItem
    }
  }
</script>

